<template>
  <div class="cate-box">
    <van-nav-bar class="my-navbar" title="分类" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div class="main-box">
      <van-sidebar class="mySidebar" v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in listData"
          :title="item.categoryName"
          :key="item.categoryId"
        >
        
        </van-sidebar-item>
        
      </van-sidebar>
      <div class="main-content">
        <div
          class="content-box1"
          v-for="val1 in choosenList.secondLevelCategoryVOS"
          :key="val1.categoryId"
        >
          <h3>{{val1.categoryName}}</h3>
            <div  class="content-box2">
            <span
            class="myspan"
            v-for="val2 in val1.thirdLevelCategoryVOS"
            :key="val2.categoryId">{{val2.categoryName}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { APIgetCategoryInfo } from "@/http/index.js";
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";

Vue.use(Sidebar).use(SidebarItem);
export default {
  name: "Category",
  props: [],
  data() {
    return {
      listData: [],
      choosenList:[],
      activeKey: 0,
    };
  },
  methods: {
    onChange(index) {
      //console.log(index);
      this.choosenList = this.listData[index];
    },
  },
  mounted() {
    APIgetCategoryInfo().then((res) => {
      //console.log(res)
      if (res.resultCode == 200) {
        this.listData = res.data;
        this.choosenList = this.listData[0];
      }
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.cate-box{
  padding-bottom: 100px;
}

.main-box {
  position: relative;
}
.mySidebar {
  width: 32%;
}
.main-content {
 text-align: center;
  width: 68%;
  position: absolute;
  left: 120px;
  top: 0;
  //background-color: yellow;
  .content-box1 {
    width: 100%;
    .content-box2 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .myspan{
        width: 33%;
        font-size: 12px;
        padding-top:10px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
